<template>
  <Line :data="chartData" :options="chartOptions" />
</template>

<script setup lang="ts">
import { Line } from 'vue-chartjs'
import { defineProps, computed } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement
} from 'chart.js'
import { Statistic } from '@/model/HomeModels';

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)

const props = defineProps({
  category: {
    type: Object as () => Statistic,
    required: true, // 设置为必填项，确保组件接收到数据
  }
});

// 使用计算属性从props中提取数据并格式化
const chartData = computed(() => {
  return {
    labels: props.category.labels,
    datasets: [
      {
        label: props.category.label,
        data: props.category.data,
        borderColor: 'rgba(75, 192, 192, 1)',
        tension: 0.4
      }
    ]
  }
})

const chartOptions = {
  responsive: true,
  plugins: {
    legend: { position: 'top' as const },
    title: { 
      display: true, 
      text: props.category.label // 使用传入的label作为标题
    }
  }
}
</script>
